<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0, width=device-width"/>
    <title>api</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../css/login.css" />
    <link rel="stylesheet" type="text/css" href="../css/base.css" />

</head>
    <style type="text/css">
    .w-bar {
    color: #656565;
    font-size: 14px;
    border-color: #DCDCDC;
    border-width: 0 0 1px 0;
    margin-bottom: 0;
}
.w-bar {
    display: block;
    overflow: hidden;
    position: relative;
    padding: 0 14px;
    line-height: 45px;
    color: #525252;
    margin-bottom: -1px;
  
   
    background: #fff;
}.m-user-bar .w-bar-label {
    color: #CCC;
}
.w-bar-label {
    width: 6em;
    float: left;
}.w-bar-input-clear {
    display: none;
    float: right;
    margin-right: -10px;
    position: relative;
       margin-top: 2px;
    width: 18px;
   
    line-height: 18px;
    font-size: 14px;
    font-family: sans-serif;
    text-align: center;
    background: #dcdcdc;
    color: #fff;
    border-radius: 100%;
    border: 10px solid #fff;
}.w-bar {
    display: block;
    overflow: hidden;
    position: relative;
    padding: 0 14px;
    line-height: 45px;
    color: #525252;
    margin-bottom: -1px;
    border-width: 1px 0;
    background: #fff;
}
.w-bar-control {
    overflow: hidden;
    position: relative;
}
.w-bar-input {
    width: 100%;
    height: 38px;
    line-height: 38px;
    background: none;
    border: none;
    color: #333;
    outline: none;
    padding: 0;
    margin: 0;
}
input {
    -webkit-appearance: none;
}
.w-switcher, .w-switcher:after {
    -webkit-transition: all .2s;
}

span.save {
	
    display: block;
    -webkit-appearance: none;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    margin: 26px 14px;
    background: #FF0000;
    color: #fff;
    border: none;
    height: 40px;
    line-height: 40px;
    border-radius: 3px;
    text-align: center;
}

    </style>

</head>
<body>
    <header id='header'>
        <div class="header"> <i id="back" class="back" onclick="back()"></i>
            <h1>修改昵称</h1>

        </div>
    </header>
    <script id='username-template' type="text/x-dot-template">
    	<div  class="w-inputBar border-bottom-img w-bar" >
                	
                		<a id='clear' class="w-bar-input-clear"  style="display: block;cursor: pointer">×</a>
                	
	                <div class="w-bar-control">
	                <input data-pro="input" class="w-bar-input" type="text" id='username' placeholder="请输入新的昵称" value="{{=it}}">
	                </div>
                </div>
                
                <span class="save" id="saveAdd" data-tpa="1302" onclick="save()">保存</span>
    </script>
    <div id='username-content'>
    	
    </div>
     
  

</body>
    <script type="text/javascript" src="../script/zepto.min.js"></script>

    <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript" src="../script/doT.min.js"></script>
    <script type="text/javascript" src="../script/common.js"></script>

    <script>
    var uid = '';
    	apiready = function(){
    	headerstatus()
    	uid = api.pageParam.id;
    	var user = $api.getStorage('user');
    	
    	var user_name = user.username;
    
    	var a = $api.byId('username-content');
            var tpl = $api.byId('username-template').text;
            var tempFn = doT.template(tpl);
            $api.html(a,tempFn(user_name));  	
          	clear()
       }
       
       var username= $api.byId('username');
       var reg = /^[\u4e00-\u9fa5\w]{1,12}$/;
	   function clear(){
	       	var clear = $api.byId('clear');
	    	$api.addEvt(clear, 'click', function(){
	    	var username= $api.byId('username');
	       		$api.val(username, '');
	    	});
	    }
	    //保存修改
	    function save(){
	    var _username= $api.byId('username');
	    var newusername = $api.val(_username);
	    
		    if(reg.test(newusername)){
		    	api.ajax({
	                url:'http://wap.jqmao.cn/updateUsername?uid='+uid+'&username='+newusername
                },function(ret,err){
                	//coding...
                	if(ret.code==1){
                	api.execScript({
                        name:'root',
	                    frameName: 'user',
	                    script: 'userReload()'
                    });
                	api.closeWin();
					          	               	
                	api.sendEvent({
					    name: 'getnewusername',
					    extra: {
					        newusername: newusername,   
					    }
					});
                        
				    	//openWin('userDetail')			    
                		
                	}else{
                		toast('修改失败')
                	}
                });
		    }else{
		    	toast('填写不符合要求');
		    }
	    	
	    }
	    
       
    </script>

</html>
